import { useState } from "react";
import './App.css'
// 列表渲染
const list  = [
  {id:1, name:"vue"},
  {id:2, name:"react"},
  {id:3, name:"angular"},
]
const isLogin  = true;

const isArticle  = 1  // 0 1 2
function getActiveItem(){
  if(isArticle === 0){
    return <div>单图模式</div>
  }else if(isArticle === 1){
    return <div>双图模式</div>
  }else if(isArticle === 2){
    return <div>三图模式</div>
  }
}
// react中的基础事件绑定
// const  handleClick = (e)=>{
//   console.log('点击了',e)
// }
// const  handleClick = (name)=>{
//   console.log('传递自定义参数',name)
// }
const  handleClick = (name,e)=>{
  console.log('传递自定义参数+事件对象',name,e)
}
// react组件
function Button(){
  return <button>我是按钮</button>
}




function App() {
  const [ count, setCount] = useState(0);
  function handleCountClick(){
    setCount(count + 1)
  }
  return (
    <div className="App">
     {/* 列表渲染 */}
     {list.map(item=> <li key={item.id}>{item.name}</li> )}
     {/* 条件渲染 */}
     {isLogin && <div>jack</div>}
     {isLogin ? <div>jack</div> : <div>loading...</div>}
     {/* 复杂条件渲染 */}
     {getActiveItem()}
     {/* <button type="button" onClick={()=>handleClick('jack')}>点击</button> */}
     <button type="button" onClick={(e)=>handleClick('jack',e)}>点击</button>
     <Button></Button>
     <button onClick={handleCountClick}>自增{count}</button>
     <span className="foo">this is span</span>
     <span style={{color:'red',fontSize:'45px'}}>this is span</span>

    </div>
  );
}

export default App;
